import React, { useState } from 'react'
import './header.css'

const Header = () => {
  // 改变背景色
  window.addEventListener('scroll', function () {
    const header = document.querySelector('.header')
    if (this.scrollY >= header.offsetHeight) {
      header.classList.add('scroll-header')
    } else {
      header.classList.remove('scroll-header')
    }
  })


  // 更换黑夜模式
  function changeTheme(e) {
    e.target.classList.toggle('bx-sun')
    document.body.classList.toggle('dark')
  }

  // 切换菜单 && 导航高亮
  const [toggle, setToggle] = useState(false)
  const [activeNav, setActiveNav] = useState('#home')

  return (
    <header className="header">
      <nav className="nav container">
        <a href="index.html" className="nav-logo">
          Jetwang
        </a>

        <div className={toggle ? 'nav-menu show-menu' : 'nav-menu'}>
          <ul className="nav-list grid">
            <li className="nav-item">
              <a
                href="#home"
                className={activeNav === '#home' ? 'nav-link active-link' : 'nav-link'}
                onClick={() => setActiveNav('#home')}
              >
                <i className="uil uil-estate nav-icon"></i> Home
              </a>
            </li>
            <li className="nav-item">
              <a
                href="#about"
                className={activeNav === '#about' ? 'nav-link active-link' : 'nav-link'}
                onClick={() => setActiveNav('#about')}
              >
                <i className="uil uil-user nav-icon"></i> About
              </a>
            </li>
            <li className="nav-item">
              <a
                href="#skills"
                className={activeNav === '#skills' ? 'nav-link active-link' : 'nav-link'}
                onClick={() => setActiveNav('#skills')}
              >
                <i className="uil uil-file-alt nav-icon"></i> Skills
              </a>
            </li>
            <li className="nav-item">
              <a
                href="#services"
                className={activeNav === '#services' ? 'nav-link active-link' : 'nav-link'}
                onClick={() => setActiveNav('#services')}
              >
                <i className="uil uil-briefcase-alt nav-icon"></i> Services
              </a>
            </li>
            <li className="nav-item">
              <a
                href="#profolio"
                className={activeNav === '#profolio' ? 'nav-link active-link' : 'nav-link'}
                onClick={() => setActiveNav('#profolio')}
              >
                <i className="uil uil-scenery nav-icon"></i> Portfolio
              </a>
            </li>
            <li className="nav-item">
              <a
                href="#contact"
                className={activeNav === '#contact' ? 'nav-link active-link' : 'nav-link'}
                onClick={() => setActiveNav('#contact')}
              >
                <i className="uil uil-message nav-icon"></i> Contact
              </a>
            </li>
            <li className="nav-item changeTheme">
              <i className="bx bx-moon" onClick={changeTheme}></i>
            </li>
          </ul>
          <i className="uil uil-times nav-close" onClick={() => setToggle(!toggle)}></i>
        </div>
        <div className="nav-toggle" onClick={() => setToggle(!toggle)}>
          <i className="uil uil-apps"></i>
        </div>
      </nav>
    </header>
  )
}

export default Header
